<template>
  <div class="step clearfix">
    <div class="step-number">{{ num }}.</div>
    <div class="upload-box">
      <div class="upload-img">
        <upload-img
          :img-max-width="184"
          :url="value.img_url ? value.img_url : $options.imageUrl"
          action="/api/upload?type=step"
          @imgUploadedUrl="changeUrl"
        />
      </div>

      <el-input
        class="introduce-text"
        type="textarea"
        :rows="8"
        placeholder="请输入内容"
        v-model="value.describe"
      />
      <i
        class="delete-icon el-icon-close"
        v-show="length !== 1"
        @click="removeStep"
      />
    </div>
  </div>
</template>

<script>
import UploadImg from "@/components/upload-img";
export default {
  imageUrl: "https://s1.c.meishij.net/n/images/upload_step_img.png", // 静态图片

  components: {
    UploadImg,
  },

  props: {
    num: {
      type: Number,
      default: 1,
    },
    length: {
      type: Number,
      default: 1,
    },
    value: {
      type: Object,
      default: () => {},
    },
  },

  methods: {
    changeUrl(res) {
      this.$emit("input", { ...this.value, img_url: res.imgUrl });
    },

    removeStep() {
      this.$emit("removeStep", this.num);
    },
  },
};
</script>

<style>
.step {
  margin-bottom: 20px;
}
.step > div,
.upload-box .upload-img,
.upload-box .introduce-text {
  /* > 直接子元素 */
  float: left;
}
.step .step-number {
  height: 180px;
  width: 100px;
  font-size: 60px;
  color: #aaa;
  font-weight: bold;
  /* vertical-align: top; */
  line-height: 180px;
  font-family: Arial, Helvetica, sans-serif;
}
.step .upload-box .introduce-text {
  width: 500px;
  margin-left: 40px;
  margin-right: 10px;
}

.step .upload-box img {
  vertical-align: top;
}
</style>